<!--  -->
<template>
  <div class="capitaldetails">
    <van-nav-bar @click-left="onClickLeft" title="资金明细" :left-arrow="true" />
    <div class="type" @click="typeshow">
      {{typename=='全部'?'全部交易类型':typename}}
      <img
        v-if="!show"
        src="@/assets/img/capitaldetails/sanjiao.png"
      />
      <img v-else class="open" src="@/assets/img/capitaldetails/sanjiao.png" />
    </div>
    <div class="cell" @click="capitalname">
      <div class="cell_title">
        <div class="title_l" @click="showdate=true">
          本月
          <img src="@/assets/img/capitaldetails/sanjiao.png" />
        </div>
        <div class="title_r">
          <p>
            <span>支出</span>¥1,082.30
          </p>
          <p>
            <span>收入</span>¥2,682.90
          </p>
        </div>
      </div>
      <div class="cell_main">
        <img src="@/assets/img/capitaldetails/chongzhi.png" />
        <div class="main_r">
          <div class="name">
            <div class="column">充值</div>
            <p>银行转账</p>
            <p>09-05 15:30</p>
          </div>
          <div class="money">
            <p>+2.00</p>
            <p>审核中</p>
          </div>
        </div>
      </div>
      <div class="cell_main">
        <img src="@/assets/img/capitaldetails/chongzhi.png" />
        <div class="main_r">
          <div class="name">
            <div class="column">充值</div>
            <p>银行转账</p>
            <p>09-05 15:30</p>
          </div>
          <div class="money">
            <p>+2.00</p>
            <p>审核中</p>
          </div>
        </div>
      </div>
    </div>
    <div class="cell">
      <div class="cell_title">
        <div class="title_l" @click="showdate=true">
          7月
          <img src="@/assets/img/capitaldetails/sanjiao.png" />
        </div>
        <div class="title_r">
          <p>
            <span>支出</span>¥0
          </p>
          <p>
            <span>收入</span>¥0
          </p>
        </div>
      </div>
      <div class="cell_nodata">7月份没有收入支出数据哦～</div>
    </div>
    <van-popup
      v-model="show"
      round
      position="bottom"
      closeable
      :sticky="false"
      :style="{ height: '42%' }"
    >
      <div class="popuptitle">选择交易类型</div>
      <div class="popupcontent">
        <van-grid :column-num="3" :border="false">
          <van-grid-item v-for="(item,index) in buttonlist" :key="index">
            <van-button
              @click="typebtn(item,index)"
              class="defaultbotton"
              type="primary"
              :class="{'active':isActive==index}"
            >{{item.name}}</van-button>
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>
    <van-popup
      v-model="showdate"
      round
      position="bottom"
      :sticky="false"
      :style="{ height: '45%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="showdate=false"
      />
    </van-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "capitaldetails",
  },
  data() {
    //这里存放数据
    return {
      show: false,
      showdate: false,
      isActive: 0,
      typename: "全部",
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      buttonlist: [
        {
          id: "1",
          name: "全部",
        },
        {
          id: "2",
          name: "会员互转",
        },
        {
          id: "3",
          name: "充值",
        },
        {
          id: "4",
          name: "收益",
        },
        {
          id: "5",
          name: "提现",
        },
        {
          id: "6",
          name: "投资",
        },
        {
          id: "7",
          name: "签到奖励",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    typeshow() {
      this.show = true;
    },
    typebtn(val, index) {
      this.typename = val.name;
      this.isActive = index;
      this.show = false;
    },
    capitalname() {
      this.$router.push({
        path: "/capitalname",
        // query: {
        // },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
/* //@import url(); 引入公共css类 */
.capitaldetails {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  .type {
    padding: 11px 0;
    background: #f8f8f8;
    text-align: center;
    img {
      width: 10px;
      height: 8px;
      margin-left: 5px;
    }
  }
  .cell {
    .cell_title {
      background: #f2f2f2;
      padding: 15px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .title_l {
        width: 74px;
        height: 34px;
        background: #ffffff;
        border-radius: 100px;
        font-size: 15px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #383838;
        line-height: 34px;
        img {
          width: 9px;
          height: 6px;
          vertical-align: middle;
        }
      }
      .title_r {
        p {
          font-size: 12px;
          font-family: DINPro, DINPro-Medium;
          font-weight: 500;
          color: #999999;
          span {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #999999;
            margin-right: 10px;
          }
        }
        p:first-child {
          margin-bottom: 5px;
        }
      }
    }
    .cell_main {
      background: #fafafa;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      padding: 15px 15px 0 15px;
      img {
        width: 36px;
        height: 36px;
        margin-right: 10px;
      }
      .main_r {
        width: calc(100% - 46px);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
        padding: 6px 0 13px 0;

        .name {
          .column {
            font-size: 15px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #383838;
          }
          p {
            font-size: 11px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #999999;
          }
          p:first-child {
            margin: 8px;
          }
        }
        .money {
          p {
            font-size: 11px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #ff3927;
          }
          p:first-child {
            margin-bottom: 4px;
          }
        }
      }
    }
    .cell_nodata {
      padding: 23px 13px;
      font-size: 11px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #999999;
      background: #fafafa;
    }
  }
  .popuptitle {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20253a;
    letter-spacing: 0px;
    text-align: center;
    line-height: 50px;
  }
  /deep/.van-popup__close-icon {
    font-size: 18px;
    color: #272c40;
  }
  .popupcontent {
    padding: 20px;
  }
  .defaultbotton {
    border: 1px solid #979797;
    width: 100%;
    border-radius: 5px;
    font-size: 15px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #979797;
    background: #ffffff;
  }
  /deep/.van-grid-item__content {
    padding: 5px 5px;
  }
  .active {
    background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
    box-shadow: 0px 2px 4px 0px #ffd9d4;
    font-size: 15px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    border: 1px solid #ff6b4f;
    color: #ffffff;
  }
  .open {
    transform: rotate(60deg);
    -ms-transform: rotate(60deg); /* IE 9 */
    -moz-transform: rotate(60deg); /* Firefox */
    -webkit-transform: rotate(60deg); /* Safari 和 Chrome */
    -o-transform: rotate(60deg); /* Opera */
  }
}
</style>